<template>
	<div class="entertheshopstyle">
		<!-- 标题 -->

		<!-- 表单 -->
		<el-form label-position="right" label-width="80px" :model="$store.state.$currentproperties" :rules="rules" size="small">
			<el-form-item label="左侧标题" :hide-required-asterisk="true" prop="shopName">
				<el-input v-model="$store.state.$currentproperties.shopName" placeholder="请输入左侧标题" maxlength="10" show-word-limit />
			</el-form-item>

			<!-- 文案 -->
			<el-form-item label="右侧内容" :hide-required-asterisk="true" prop="copywriting">
				<el-input v-model="$store.state.$currentproperties.copywriting" placeholder="请输入右侧内容" maxlength="8" show-word-limit />
			</el-form-item>

			<!-- 文案 -->
			<el-form-item label="左侧描述" :hide-required-asterisk="true" prop="copywriting">
				<el-input v-model="$store.state.$currentproperties.label" placeholder="请输入单元格描述" maxlength="20" show-word-limit />
			</el-form-item>

			<el-form-item label="左侧图标">
				<van-icon :name="$store.state.$currentproperties.icon" v-if="$store.state.$currentproperties.icon" />
				<!-- 添加导航按钮 -->
				<el-input v-model="$store.state.$currentproperties.icon" placeholder="请输入图标名称">
				</el-input>
			</el-form-item>
			<el-form-item label="圆角风格" prop="border">
				<el-switch v-model="$store.state.$currentproperties.inset"></el-switch>
			</el-form-item>
			<el-form-item label="是否链接" prop="border">
				<el-switch v-model="$store.state.$currentproperties.isLink"></el-switch>
			</el-form-item>
			<!-- 跳转页面 -->
			<el-form-item v-if="$store.state.$currentproperties.isLink" label="跳转页面">
				<div class="imgText">
					<el-select style="width: 60%" v-model="$store.state.$currentproperties.type" placeholder="请选择跳转类型" size="mini">
						<el-option v-for="item in optionsType" :key="item.name" :label="item.name" :value="item.type">
						</el-option>
					</el-select>

					<!-- 输入链接 -->
					<el-input style="width: 100%" size="mini" placeholder="请输入链接，输入前确保可以访问"
						v-model="$store.state.$currentproperties.http.externalLink">
					</el-input>
				</div>
			</el-form-item>
		</el-form>

		<!-- 上传图片 -->
		<uploadimg ref="upload" @uploadInformation="uploadInformation" />
	</div>
</template>

<script>
	import uploadimg from '../../uploadImg' //图片上传

	export default {
		name: 'entertheshopstyle',
		props: {
			// $store.state.$currentproperties: Object,
		},
		data() {
			return {
				rules: {
					//校验表单输入
					shopName: [
						//页面名称
						{
							required: true,
							message: '请输入左侧标题',
							trigger: 'blur'
						},
					],
					copywriting: [
						//页面描述
					],
				},
				optionsType: [{
						type: '10',
						name: '内部链接',
					},
					{
						type: '11',
						name: '外部链接',
					},
				], // 选择跳转类型
				emptyText: '',
			}
		},
		methods: {
			// 提交
			uploadInformation(res) {
				this.$store.state.$currentproperties.icon = res
			},
		},
		components: {
			uploadimg,
		},
	}
</script>

<style scoped lang="less">
	.entertheshopstyle {

		/* 图片字 */
		.imgText {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;

			.fir-sele.el-select {
				width: 40%;
			}
		}

		/* 上传图片按钮 */
		.uploadImg {
			width: 345px;
			height: 40px;
			margin-top: 20px;
		}

		img {
			display: block;
			margin: 0 auto;
			width: 56px;
			height: 56px;
		}
	}
</style>